@import 'animations.css';
@import 'layout.css';
@import 'remixicon.css';
@import 'nav.css';
@import 'miniPlayer.css';
@import 'home.css';
@import 'search.css';
@import 'library.css';
@import 'list.css';
@import 'snackbar.css';
@import 'header.css';
@import 'upcoming.css';

:root {
  --bg: transparent;
  --onBg: transparent;
  --text: black;
  --borderColor: transparent;
  --border: 0.1vmin solid var(--borderColor);
  --shadowColor: transparent;
  --shadow: 0 0.5vmin 1.5vmin var(--shadowColor);
  --roundness: 0.4rem;
  --defaultBg: var(--text);
  --defaultText: var(--bg);
  --pageTransitionEffect: translateX(100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}


img,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
select {
  font: inherit;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}


button {
  background: none;
  border: none;
  transition: all 0.3s ease;
  user-select: none;

  &:active {
    transform: scale(0.8);
  }
}


input {
  font-family: inherit;
  outline: none;
}

select {
  font-family: inherit;
  background: none;
  outline: none;
  color: var(--text);
  border: none;
  border-radius: var(--roundness);

  /* fix white on white issue on dark mode */
  option,
  optgroup {
    cursor: pointer;
    background: var(--bg);
  }
}

dialog[open] {
  margin: auto;
  background: none;
  border: none;
  animation: boing 0.3s ease-in-out forwards;
}


dialog::backdrop {
  animation: dialogAppear 0.3s ease-in-out forwards;
  background-color: #0007;
}



a {
  text-decoration: none;
  color: inherit;
}


.hide {
  display: none !important;
}

.delete {
  --onBg: #f222;
  --text: #f22c;
}


#settings,
#changelog {
  button {
    border: var(--border);
    border-radius: var(--roundness);
    background: var(--onBg);
    color: var(--text);
    font-family: inherit;
    font-size: inherit;
    padding: 1vmin 2vmin;
    margin: 1vmin 2vmin;
  }
}


.ri-loader-3-line {
  animation: spinner 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

#loadingScreen {
  background-color: var(--bg);
  color: var(--text);
  border-radius: var(--roundness);

  i {
    display: block;
    font-size: xx-large;
  }

}



dialog.displayer {
  white-space: pre;
  background: var(--bg);
  color: var(--text);
  border-radius: var(--roundness);

  section {
    white-space: normal;
    overflow: scroll;

    p {
      margin-bottom: 1rem;
      transition: all 0.5s;
      font-size: small;
    }

    p.active {
      font-size: large;
      font-weight: bold;
    }
  }

}

dialog.watcher {
  height: 100dvh;
  width: 100dvw;
  background: var(--bg);
  color: var(--text);

  button {
    color: inherit;
  }

  video {
    width: 100%;
    max-width: 100vmin;
    border-radius: var(--roundness);
  }

  select {
    width: 7ch;
    margin-left: 1ch;
  }
}


/* disable action during load events */
#playButton.ri-loader-3-line {
  pointer-events: none;
}

.ri-draggable:hover {
  cursor: grab;
}

.ri-draggable:active {
  cursor: grabbing;
}
